<!DOCTYPE html>
<html>
<?php require 'header.php'; ?>
<body>

<?php require 'title.php'; ?>

<div class="layui-content" style="padding-top: 0px;">
    <div class="layui-container">
        <div class="layui-row">

            <?php require 'step.php'; ?>

            <div class="layui-col-md12">
                <div class="layui-card layui-fixed">
                    <div class="layui-card-header">
                        <span>4 开始安装</span>
                        <span class="layui-card-version"><?= $versionInfo['code'] ?></span>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-install">
                            <div class="tips">正在安装，请稍后...</div>
                            <div class="layui-progress layui-progress-big" lay-showPercent="true">
                                <div class="layui-progress-bar layui-bg-blue" lay-percent=""></div>
                            </div>
                            <div class="layui-install-logs">
                                <li>创建数据表...</li>
                            </div>
                        </div>

                        <div class="layui-complete" style="display: none;">
                            <div><img src="/install/images/right.png" width="100px" height="100px"></div>
                            <div class="layui-success">安装成功</div>
                            <a href="/" target="_blank" class="layui-btn layui-btn-normal layui-btn-fixed"
                               style="border-radius:5px !important; height: 44px">访问前台</a>
                            <a href="/kgbackend" target="_blank" class="layui-btn layui-btn-normal layui-btn-fixed"
                               style="border-radius:5px !important; height: 44px">访问后台</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<?php require 'footer.php'; ?>

</body>

<script type="text/javascript">
    layui.use(['jquery', 'layer', 'element'], function () {
        var layer = layui.layer;
        var jquery = layui.jquery;
        var element = layui.element;
        var n = 1

        jquery('#stepOne').addClass('layui-active');
        jquery('#stepTwo').addClass('layui-active');
        jquery('#stepThree').addClass('layui-active');
        jquery('#stepFour').addClass('layui-active');

        var data = <?php echo json_encode($_POST);?>;

        startInstall(data, n);

        function startInstall(field, n) {
            field.step = 4;
            field.install = 1;
            field.n = n
            jquery.post('./index.php', field, function (res) {
                if (res.code === 200) {
                    res.progress = Math.round((res.n / res.count) * 100) > 100 ? 100 : Math.round((res.n / res.count) * 100)

                    // 渲染进度条
                    jquery('.layui-progress-bar').attr('lay-percent', res.progress) && element.render();

                    // 查找当前元素
                    var logsElem = jquery('.layui-install-logs');
                    // 插入HTML元素
                    if (res.msg !== null) {
                        var html = '';
                        var elem = 'layui-table-' + res.n;
                        if (jquery('.' + elem).length === 0) {
                            html += '<li class="' + elem + '">' + res.msg + '</li>';
                        }
                        logsElem.append(html);
                    }

                    if (logsElem[0].scrollHeight >= logsElem[0].clientHeight) {
                        var scrollTop = logsElem[0].scrollHeight - logsElem[0].clientHeight;
                        logsElem.scrollTop(scrollTop);
                    }

                    if (res.n === 999999) {
                        jquery('.layui-install').remove();
                        jquery('.layui-complete').show();
                    } else {
                        startInstall(field, res.n);
                    }

                } else {
                    layer.msg(res.message);
                }
            }, 'json');
        }
    })
</script>
</html>